<template>
    <div class="channel-dialog">
        <el-dialog v-model="dialogFormVisible" title="添加ChannelID" width="450" @close="handleCancel">
            <div style="padding: 10px;">
                <el-form :model="channelForm" ref="channelFormRef" :rules="rules" label-width="auto">
                    <el-form-item label="ChannelID：" prop="id">
                        <el-input v-model="channelForm.id" placeholder="请输入ChannelID" />
                    </el-form-item>
                    <el-form-item label="ChannelName：" prop="name">
                        <el-input v-model="channelForm.name" placeholder="请输入ChannelName" />
                    </el-form-item>
                    <el-form-item label="账户名称：" prop="accountId">
                        <el-select v-model="channelForm.accountId" placeholder="请选择账户名称">
                            <el-option v-for="item in accountOptions" :key="item.id" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleCancel">取消</el-button>
                    <el-button type="primary" @click="handleSubmit(channelFormRef)">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { defineComponent, onMounted, reactive, ref } from 'vue';
import service from '../config';
defineComponent({ name: 'ChannelAdd' })
const dialogFormVisible = ref(false)
const channelFormRef = ref<FormInstance>()
interface RuleForm {
    id: number,
    accountId: number,
    name: string
}
const channelForm = ref<RuleForm>({
    id: null,
    accountId: null,
    name: ''
})
const rules = reactive<FormRules<RuleForm>>({
    id: [
        { required: true, message: '请输入ChannelID', trigger: 'blur' },
    ],
    accountId: [
        { required: true, message: '请选择账户名称', trigger: 'blur' },
    ],
    name: [{ required: true, message: '请输入ChannelName', trigger: 'blur' }]
})
const accountOptions = ref([])
const openModal = () => {
    dialogFormVisible.value = true
}
const handleCancel = () => {
    dialogFormVisible.value = false
    channelForm.value = {
        id: null,
        name: '',
        accountId: null
    }
}

const handleSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            service.post('channel/add', { ...channelForm.value, })
                .then(response => {
                    ElMessage.success('提交成功！')
                    dialogFormVisible.value = false
                    channelForm.value = {
                        id: null,
                        name: '',
                        accountId: null
                    }
                })
                .catch(error => {
                    ElMessage.error(error?.message || '提交失败！')
                });
        } else {

        }
    })
}

const getAccount = () => {
    service.get('/account/getAll')
        .then(response => {
            accountOptions.value = response?.data
            accountOptions.value.push({ id: -1, name: '其他' })
        })
        .catch(error => {
            ElMessage.error(error)
        });
}


onMounted(() => {
    getAccount()
})
defineExpose({ openModal })
</script>

<style lang="scss">
.channel-dialog {
    .el-dialog {
        padding: 20px;

        .el-dialog__title {
            font-weight: 700;
        }

        .el-dialog__footer {
            padding: 0;
        }
    }

    .el-form-item {
        margin-bottom: 20px;
    }

    .el-form-item__label {
        font-size: 14px;
        font-weight: 600;
    }
}
</style>